<template>
    <div class="newquestionnaire">
        <div :class="{addButton: !isRecycleBin, NoneButton: isRecycleBin}" @click="addQuestionnaire">新建</div>

        <div class="side-box">
            <router-link to="/mineQuestion" class="side-btn" active-class="clickStatus"  replace>
                <img src="../../assets/question.png" alt="">
                <span>个人问卷</span>
            </router-link>
            <router-link to="/recycleBin" class="side-btn" active-class="clickStatus" replace>
                <img src="../../assets/recyclebin.png" alt="">
                <span>回收站</span>
            </router-link>
        </div>
    </div>
</template>

<script>
import {  useRouter } from 'vue-router'
import store from '../../store'
import { createQuestionnaire } from '@/util/apis'
export default {
    setup () {
        const router = useRouter()
        const toMineQuestion = (() => {
            router.replace({
                path: 'mineQuestion'
            })
        })
        const toRecycleBin = (() => {
            router.replace({
                path: 'recycleBin'
            })
        })
        return {
            toMineQuestion,
            toRecycleBin
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        addQuestionnaire(){
            if (this.$route.path == '/mineQuestion') {
                store.commit('addQuestionnaire')
                let params = {
                    record : store.state.question,
                    username : sessionStorage.getItem("username")
                }
                console.log(params)
                createQuestionnaire(params).then((response)=>{
                    console.log(response)
                }).catch((error)=>{
                    console.log(error)
                })
            }
        }
    },
    computed: {
        isRecycleBin(){
            if (this.$route.path == '/recycleBin') {
                return true
            }
            else{
                return false
            }
        }
    }
}
</script>

<style scoped>
.newquestionnaire{
    width: 200px;
    background-color: #2b343b;
    box-shadow: 0 4px 8px rgb(0, 0, 0 / 50%);
}

.addButton{
    position: relative;
    width: 90%;
    height: 40px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #4187f6;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}

.NoneButton{
    position: relative;
    width: 90%;
    height: 40px;
    background-color: #f5f5f5;
    color: #c0c0c0;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    line-height: 40px;
    cursor: default;
}

.side-box{
    display: block;
    position: relative;
    width: 80%;
    min-height: 80%;
    margin-top: 20px;
    border-left: 10px solid #4187f6;
}

.side-btn{
    display: block;
    position: relative;
    width: 100%;
    height: 40px;
    top: 30px;
    margin: 20px -1px;
    color: #fff;
    line-height: 40px;
    border-radius: 0 15px 15px 0;
    cursor: pointer;
}

.side-btn span{
    display: block;
    right: 25px;
    position: relative;
    float: right;
}

.side-btn img{
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 8px;
    float: right;
}

.clickStatus{
    background-color: #4187f6;
}
</style>